<template>
  <div class="infowrap infowrap3">
    <el-dialog
      v-model="dialogVisible"
      title="圈地"
      width="80%"
      custom-class="diyclass"
    >
      <div class="qd" v-if="page == 2">
        <div class="pagename">2.{{editInfoGet?'修改':'创建'}}地块信息</div>
        <div class="pagewrap">
          <div class="pc">
            <div class="name1">
              <div class="red">*</div>
              地块名称:
            </div>
            <el-input v-model="form.name" placeholder="请输入" />
          </div>
          <div class="pc">
            <div class="name1">
              <div class="red">*</div>
              地块地址:
            </div>
            <el-input
              v-model="form.address"
              placeholder="请输入"
              show-word-limit
            />
          </div>
          <div class="pc">
            <div class="name1">
              <div class="red">*</div>
              地块面积:
            </div>
            <el-input
              v-model="form.area"
              type="number"
              placeholder="请输入"
              show-word-limit
            />
          </div>
          <!-- <div class="pc">
            <div class="name1">
              <div class="red">*</div>
              真实地理位置:
            </div>
            <div class="btndraw">
              <div class="btnc" @click="goStep(1)">
                <img src="@/assets/img/add9.png" class="icon2" alt="" />
                绘制地块轮廓
              </div>
              
            </div>
          </div> -->
        </div>
      </div>
      <div class="qd" v-if="page == 1">
        <div class="pagename">1.绘制地块轮廓</div>
        <div class="mapwrap">
          <mapView   v-if="dialogVisible" @goStep="goStep2" ref="map" />
        </div>
      </div>
      <template #footer v-if="page == 2">
        <span class="dialog-footer">
          <el-button :disabled="overFlag" @click="submit">提交</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
    
  <script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  computed,
  onUnmounted,
  toRefs,

} from "vue";
import bus from '@/utils/bus'
import { useRouter } from "vue-router";
import mapView from "@/components/mapContainer/index2.vue";
import { post, get } from "@/public/request/api";
import { ElMessage } from "element-plus";
import storage from '@/store'
export default defineComponent({
  components: { mapView },
  props:{
      editInfo:Object
  },
  setup(props,{emit}) {
    let overFlag = computed({
      get() {
        if (form.address && form.name && form.area) {
          return false;
        } else {
          return true;
        }
      },
      set(value) {},
    });
    //变量
    const state = reactive(props);
    const { editInfo } = toRefs(state);
    let editInfoReal=state['editInfo']
    let editInfoGet=editInfo
    console.log('辅导费地方',editInfoReal)
    let form = reactive({
      address: "",
      account: "",
      pass: "",
      name: "",
      tel: "",
      areAvalue: "",
      textarea: "",
      date: "",
      area: "",
      plotInodeList: [],
      blockInodeList:[],
      id:null
    });
    if(editInfoReal){
      form.name=editInfoReal.name
      form.id=editInfoReal.id
    }
    let dialogVisible = ref(false);
    let page = ref(1);
    const areaOptions = [
      {
        value: "",
        label: "地块1",
      },
      {
        value: "",
        label: "地块2",
      },
      {
        value: "",
        label: "地块33333",
      },
    ];
    const manOptions = [
      {
        value: "",
        label: "李宁",
      },
      {
        value: "",
        label: "张三",
      },
    ];
    let mapData = reactive({
      value: []
    })
    // 生命周期
    onMounted(() => {
      
    });

    onUnmounted(() => {
      //
    });
   
    let map = ref(null);
    let plotAllInfo = reactive({
      value: [],
    });
    //methods
    
    function goStep2(val) {
      console.log("val", val);
      page.value += val.step;
      form.address = val.address;
      form.area = val.area;
      form.blockInodeList=val.inPoints
      form.plotInodeList=val.point
    }
    function goStep(val) {
      console.log("page", page);
      if (val == -1) {
      }
      if (page.value < 3) {
        page.value += val;
      }
    }
    function submit() {
      
      if(editInfoReal){
        post("/plot/edit", {
          baseName:storage.state.userInfo.baseName,
          baseId:storage.state.userInfo.baseId,
          address: form.address,
          area:form.area,
          color: "red",
          plotArea: form.area,
          plotInodeList: form.plotInodeList,
          name: form.name,
          blockInodeList:form.blockInodeList,
          id:form.id
          //"supplement": ""
        }).then((res) => {
          ElMessage({
            message: "编辑成功",
            type: "success",
          });
          dialogVisible.value = false;
          emit('updateEdit',{
            name:form.name,
            area:form.area,
            address:form.address,
            plotInodeList: form.plotInodeList,
            blockInodeList:form.blockInodeList,
          })
        });
      }else{
        post("/plot/add", {
          baseName:storage.state.userInfo.baseName,
          baseId:storage.state.userInfo.baseId,
          address: form.address,
          area:form.area,
          color: "red",
          plotArea: form.area,
          plotInodeList: form.plotInodeList,
          name: form.name,
          blockInodeList:form.blockInodeList
          //"supplement": ""
        }).then((res) => {
          ElMessage({
            message: "新增成功",
            type: "success",
          });
          dialogVisible.value = false;
          bus.emit('addOneBase');
        });
      }
      
    }
    // return
    return {
      editInfoGet,
      plotAllInfo,
      mapData,
      goStep2,
      dialogVisible,
      form,
      areaOptions,
      manOptions,
      goStep,
      page,
      submit,
      overFlag,
    };
  },
});
</script>
    
<style lang="scss">
.m-2 {
  margin: 0 !important;
}
.infowrap3 {
  .el-input__wrapper,
  .el-textarea__inner {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none !important;
  }
  .el-date-editor.el-input {
    width: 530px;
  }

  .el-select .el-input__wrapper {
    width: 535px;
    border: none !important;
    height: 33px;
    background: rgba(255, 255, 255, 0.08);
  }
  .el-select--large {
    line-height: 30px !important;
    height: 30px !important;
  }
}
.leftselect {
  .el-select .el-input__wrapper {
    background: rgba(255, 255, 255, 0.08) !important;
    width: 200px;
    border-radius: 200px;
    border: none !important;
  }
}
</style>
  
    <style lang="scss" scoped>
@import "@/assets/scss/index.scss";
.pagewrap {
  margin-top: 20px;
}
.bntss {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 35px;
  .one {
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    span {
      margin-right: 5px;
      position: relative;
      top: 2px;
    }
    .span2 {
      margin-left: 5px;
      margin-right: 0px !important;
    }
  }
  .one2 {
    margin-left: 40px;
    background: rgba(9, 127, 229, 1) !important;
  }
}
.mapwrap {
  width: 100%;
  height: 600px;
  position: relative;
  margin-top: 20px;
}
.pc {
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  .red {
    color: red;
  }
  .name1 {
    width: 100px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 10px;
  }
}
.icon2dk {
  border-radius: 10px;
  margin-top: 10px;
}
.btnc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 20px;
  padding: 10px 14px;

  border-radius: 5px;
  background: rgba(9, 127, 229, 1);
  cursor: pointer;
  color: #fff;
  width: 140px;
}
.pagename {
  color: #fff;
  display: flex;
  justify-content: center;
  font-size: 20px;
}
.zywrap {
  display: flex;
  .mcontent2 {
    margin-right: 20px;
  }
}
.picset {
  display: flex;
  align-items: center;
  .remark {
  }
  .xgsmall {
    margin-right: 10px;
  }
  .add {
    border-radius: 5px;
    width: 130px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
  }
}
.infowrap {
  .content4 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .cchild {
      background: rgba(255, 255, 255, 0.08);
      border-radius: 15px;
      padding: 20px;
      width: 24%;
      margin-top: 20px;
      margin-right: 10px;
      .big {
        font-size: 20px;
      }
      .p3 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .p3child {
          width: 49%;
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          .p3label {
            color: rgba(255, 255, 255, 0.6);
          }
          .num {
            font-weight: bold;
            font-size: 20px;
          }
        }
      }
      .p2 {
        display: flex;
        justify-content: space-around;
        .text {
          margin-left: 15px;
        }
        .p2left {
          display: flex;
          align-items: center;
          .name {
            font-weight: bold;
          }
          .label {
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
          }
        }
        .zz {
          width: 60px;
          padding: 3px;
          background: #fff;
          border-radius: 300px;
        }
      }
      .p1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        .pbtn {
          display: flex;
          align-items: center;
          .pbnt1 {
            background: rgba(9, 127, 229, 1);
            border-radius: 5px;
            font-size: 10px;
            padding: 2px 15px;
            box-sizing: border-box;
            cursor: pointer;
          }
          .pbnt2 {
            background: rgba(255, 255, 255, 0.16) !important;
            margin-left: 10px;
          }
        }
      }
    }
  }

  .panelben3 {
    margin-top: 20px;
  }
  .btnwrap {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    width: 400px;

    .btnc {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-right: 20px;
      padding: 10px 14px;
      margin-top: 10px;
      border-radius: 5px;
      background: rgba(9, 127, 229, 1);
      cursor: pointer;
    }
    .icon2 {
      width: 14px;
      margin-right: 6px;
    }
  }

  .content2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
  }
  .cc {
    display: flex;
    background: rgba(255, 255, 255, 0.08);
    flex-direction: column;
    padding: 15px;
    border-radius: 10px;
    width: 19%;
    .cct2 {
      display: flex;
      font-size: 30px;
      font-weight: bold;
      margin-top: 10px;
      align-items: center;
      .icon {
        width: 50px;
        margin-right: 12px;
      }
    }
  }
}
</style>
    